<template>
  <div class="minw">
    <div class="login col w8">
      <div class="head rb">
        <logo class="logo"></logo>
        <div class="headNav">
          <template v-for="item in navList">
            <i :key="item.name" class="navlist hover" @click="go(item.url)">{{
              item.name
            }}</i>
          </template>
        </div>
      </div>
      <div class="main row">
        <div class="img">
          <img width="300" height="300" src="@/assets/imgs/login.png" alt="" />
        </div>
        <div class="messages col">
          <div class="text1">买书省钱，卖书赚钱！</div>
          <div class="center">
            <img class="Ming" width="100" src="@/assets/imgs/wx.png" alt="" />
          </div>
          <div class="text2">扫描关注微信公众号</div>
        </div>
        <div>
          <logins></logins>
        </div>
      </div>
      <!-- <loginQR></loginQR> -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navList: [
        {
          name: "首页",
          url: "home",
          code: "",
        },
        {
          name: "客服",
          url: "login",
          code: "",
        },
        {
          name: "帮助",
          url: "login",
          code: "",
        },
      ],
    };
  },
  components: {
    logo: () => import("@/components/base/logo.vue"),
    logins: () => import("@/components/logins.vue"),
    // loginQR: () => import("@/components/util/loginQR.vue"),
  },
  methods: {
    go(url) {
      this.$goto(url);
    },
  },
};
</script>

<style lang="less" scoped>
.login {
  padding: 20px;
}
.head {
  .headNav {
    .navlist {
      position: relative;
      font-size: 14px;
      margin-right: 20px;
    }
    .navlist:not(:last-child)::after {
      content: "/";
      position: absolute;
      top: calc(50% - 6px);
      // top: 50%;
      right: -50%;
    }
  }
}

.main {
  margin-top: 20px;
  .messages {
    // margin-top: 10px;
    min-width: 240px;
    // background: rgb(231, 195, 195);
    margin-left: 40px;
    margin-right: 20px;
    .text1 {
      margin-top: 50px;
      font-size: 22px;
      text-align: center;
    }
    .Ming {
      margin-top: 40px;
    }
    .text2 {
      margin-top: 20px;
      font-size: 12px;
      text-align: center;
    }
  }
}
</style>